<!--
 * @Author: zwf
 * @Date: 2024-11-01 12:31:47
 * @LastEditTime: 2024-11-14 19:02:06
 * @LastEditors: zwf
 * 记得注释
-->
<script lang="ts" setup>
import { useTabbar } from '@/composables/useTabbar'
import { useTheme } from '@/composables/theme/theme'

const router = useRouter()

const route = useRoute()

const { themeVars, theme } = useTheme()

const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } = useTabbar()

// 动态高度计算
const navbarRef = ref()
const tabbarRef = ref()
const contentBarRef = ref()
const contentBarHeight = ref('calc(100vh - 100px)')

function handleTabbarChange({ value }: { value: string }) {
  setTabbarItemActive(value)
  router.pushTab({ name: value })
}

// 计算content-bar的动态高度
async function calculateContentHeight() {
  await nextTick()

  try {
    let navbarHeight = 0
    let tabbarHeight = 0

    // 获取navbar高度
    if (navbarRef.value) {
      const navbarInfo: any = await new Promise((resolve) => {
        // #ifdef MP-WEIXIN
        const query = uni.createSelectorQuery().in(navbarRef.value)
        query.select('.wd-navbar').boundingClientRect((rect) => {
          resolve(rect)
        }).exec()
        // #endif

        // #ifdef H5
        const rect = navbarRef.value.$el?.getBoundingClientRect()
        resolve(rect)
        // #endif
      })
      navbarHeight = navbarInfo?.height || 44
    }

    // 获取tabbar高度
    if (tabbarRef.value) {
      const tabbarInfo: any = await new Promise((resolve) => {
        // #ifdef MP-WEIXIN
        const query = uni.createSelectorQuery().in(tabbarRef.value)
        query.select('.wd-tabbar').boundingClientRect((rect) => {
          resolve(rect)
        }).exec()
        // #endif

        // #ifdef H5
        const rect = tabbarRef.value.$el?.getBoundingClientRect()
        resolve(rect)
        // #endif
      })
      tabbarHeight = tabbarInfo?.height || 50
    }

    // 设置content-bar高度
    const totalHeight = navbarHeight + tabbarHeight

    // #ifdef MP-WEIXIN
    // 微信小程序中将px转换为rpx (1px = 2rpx on 375px width devices)
    const totalHeightRpx = totalHeight * 2
    contentBarHeight.value = `calc(100vh - ${totalHeightRpx}rpx)`
    console.log('动态计算高度(微信小程序):', { navbarHeight, tabbarHeight, totalHeight, totalHeightRpx })
    // #endif

    // #ifdef H5
    // H5中使用px单位
    contentBarHeight.value = `calc(100vh - ${totalHeight}px)`
    console.log('动态计算高度(H5):', { navbarHeight, tabbarHeight, totalHeight })
    // #endif
  }
  catch (error) {
    console.error('计算高度失败:', error)
    // 使用默认高度
    // #ifdef MP-WEIXIN
    contentBarHeight.value = 'calc(100vh - 200rpx)'
    // #endif
    // #ifdef H5
    contentBarHeight.value = 'calc(100vh - 100px)'
    // #endif
  }
}

onMounted(() => {
  nextTick(() => {
    if (route?.name && activeTabbar?.value?.name && route.name !== activeTabbar.value.name) {
      setTabbarItemActive(route.name)
    }

    // 计算动态高度
    setTimeout(() => {
      calculateContentHeight()
    }, 100)
  })
})

onShow(() => {
  // #ifdef APP-PLUS
  uni.hideTabBar()
  // #endif

  // 重新计算高度
  setTimeout(() => {
    calculateContentHeight()
  }, 100)
})
</script>

<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared',
  },
}
</script>

<template>
  <wd-config-provider :theme-vars="themeVars" custom-style="height: 100%" :theme="theme">
    <wd-navbar
      ref="navbarRef"
      :title="activeTabbar.title"
      safe-area-inset-top
      placeholder
      fixed
      :bordered="false"
    />

    <!-- 页面内容容器 -->
    <div
      ref="contentBarRef"
      class="content-bar"
      :style="{ height: contentBarHeight }"
    >
      <slot />
    </div>
    <wd-tabbar
      ref="tabbarRef"
      :model-value="activeTabbar.name"
      placeholder
      bordered
      safe-area-inset-bottom
      fixed
      active-color="#0b3155"
      inactive-color="#bfbfbf"
      @change="handleTabbarChange"
    >
      <wd-tabbar-item v-for="(item, index) in tabbarList" :key="index" :name="item.name" :value="getTabbarItemValue(item.name)" :title="item.title">
        <template #icon>
          <wd-icon :name="activeTabbar.name === item.name ? item.activeIcon : item.icon" size="50rpx" />
        </template>
      </wd-tabbar-item>
    </wd-tabbar>
    <wd-notify />
    <wd-toast />
    <wd-message-box />
    <privacy-popup />
  </wd-config-provider>
</template>

<style scoped>
.content-bar {
  background-color: #fafafa;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.content-bar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
</style>
